<template>
    <view class="pub_page pub_page_bg pub_video_info">
        <!-- <pub-head headerName="video_info" :headerConfig="headerConfig"></pub-head> -->
        <div class="video_info_box" v-if="videoUrl != ''">
            <video id="myVideo" class="video" :src="videoUrl" autoplay loop @play="videoPlayMonitor"></video>
            <cover-image class="back" src="https://file.yiyanshenmei.com/upload/white_1682083033085.png"
                @click="back"></cover-image>
            <!-- <cover-view class="video_mask" @click="videoPlayClick">
                <cover-image @click.stop="videoPlayClick" v-if="!videoPlay" class="play"
                    src="https://file.yiyanshenmei.com/upload/img_77_1682081958559.png"></cover-image>
            </cover-view> -->
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            videoUrl: '',
            videoContext: '',
            videoPlay: false,
        };
    },
    onLoad(option) {
        this.videoUrl = option.videoUrl || '';
    },
    onShow() {
        if (!this.videoPlay && this.videoContext && this.videoUrl) {
            this.videoContext.play();
            this.videoPlay = true;
        }
    },
    onHide() {
        if (this.videoPlay && this.videoUrl) {
            this.videoContext.pause();
            this.videoPlay = false;
        }
    },
    methods: {
        videoPlayMonitor() {
            this.videoContext = uni.createVideoContext('myVideo');
            this.videoPlay = true;
        },
        videoPlayClick() {
            if (!this.videoUrl) {
                return;
            }
            // console.log(this.videoPlay);
            if (this.videoPlay) {
                this.videoContext.pause();
                this.videoPlay = false;
            } else {
                this.videoContext.play();
                this.videoPlay = true;
            }
        },
        back() {
            this.$comFun.closeWin();
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/chat.scss";
</style>
